<template>
    <div>
        <div class="right-body">
            <div class="operation-layout">
                <div class="operation-list">
                    <ul>
                        <li v-for="(val,index) in tabArr" :key="index" :class="[index==TxActive ? 'active':'']" @click="changeTxActive(index)">
                            <p>{{val}}</p>
                            <div class="after"></div>	        				
                        </li>  
                    </ul>
                </div>
            </div>
            <!-- Withdraw begin -->
            <div class="Withdraw-view-layout">
                <div class="Withdraw-view-left">
                    <form>
                        <div>
                            <label class="name" v-if="type==41">当前余额：</label>
                            <label class="name" v-if="type==40">收益余额：</label>
                            <label class="pic" v-if="type==41"><span>{{canCarry1}}</span>元</label>
                            <label class="pic" v-if="type==40"><span>{{canCarry2}}</span>元</label>
                        </div>
                        <!--  未绑定支付宝账号 -->
                        <div v-if="checked==0">
                            <label class="name">支付宝账号：</label>
                            <label><input v-model="fetchAccount"></label>
                        </div>
                        <!-- 已绑定支付宝账号 -->
                        <div v-else>
                            <label class="name ">支付宝账号：</label>
                            <label><span>{{fetchAccount}}</span></label>
                        </div>
                        <div v-if="checked==0">
                            <label class="name">真实姓名：</label>
                            <label><input v-model="personName"></label>
                        </div>
                        <div v-else>
                            <label class="name">真实姓名：</label>
                           <label><span>{{personName}}</span></label>
                        </div>                        
                        <div>
                            <label class="name">提现金额：</label>
                            <label><input v-model="money" @input="fetchCost()">元</label>
                        </div>
                        <div v-if="needPay">
                            <label class="name">手续费：</label>
                            <label>￥{{needPay}}</label>
                        </div>
                        <div v-if="finalMoney">
                            <label class="name">到账金额：</label>
                            <label>￥{{finalMoney}}</label>
                        </div>
                        <div class="Withdraw-view-bt">
                        <a @click="tixain()">申请提现</a>
                        </div>
                    </form>
                </div>
                <div class="Withdraw-view-right">
                    <h2>提现须知：</h2>
                    <p>1、单次提现金额不得少于100元，充值余额不可提现 </p>
                    <p> 2、每日提现上线金额为10000元，提现后3个工作日内到账 </p>
                    <p>3、如有提现相关问题，请联系在线客服进行处理，客服在线时间： </p>
                    <p>周一至周五9:00-18:00，节假日顺延。 </p>
                    <p>4、每日提现上线金额为10000元，提现后3个工作日内到账 </p>
                    <p>5、如有提现相关问题，请联系在线客服进行处理，客服在线时间： </p>
                </div>
            </div>
            <!-- Withdraw end -->
        </div>
        <Modal v-model="tishi" width="360" :closable="false" :mask-closable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>提示</span>
            </p>
            <div style="text-align:center">
                <p>{{tishiMessage}}</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="goRz()">去认证</Button>
            </div>
        </Modal>
        <Modal v-model="tishi1" width="360" :closable="false" :mask-closable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>提示</span>
            </p>
            <div style="text-align:center">
                <p>{{tishiMessage1}}</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="goRz1()">去绑定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    props:['TxActive'],
    data(){
        return{
            type:'',    //提现类型 41：余额，40：收入
            tabArr:["余额提现","收益提现"],
            canCarry1:'',    //余额可提现金额
            canCarry2:'',    //收益可提现金额
            money:'',   //提现金额
            needPay:'', //手续费
            finalMoney:'',//到账金额
            fetchAccount:'',//支付宝账号
            personName:'',//真实姓名
            checked:0,    //是否绑定支付宝
            tishi:false,
            tishi1:false,
            tishiMessage:'',
            tishiMessage1:'',

        }
    },
    created(){
        if(this.TxActive==0){
            this.type=41
        }else if(this.TxActive==1){
            this.type=40
        }
        this.confirm()
    },
    watch:{
        money(newVal,oldVal){
            if(this.type==41){
                if(Number(this.money) > Number(this.canCarry1)){
                    this.money = this.canCarry1
                    this.fetchCost()
                }else if(this.money == ''){
                    this.needPay = ''
                    this.finalMoney = ''
                }
            }else if(this.type==40){
                if(Number(this.money) > Number(this.canCarry2)){
                    this.money = this.canCarry2
                    this.fetchCost()
                }else if(this.money == ''){
                    this.needPay = ''
                    this.finalMoney = ''
                }
            }
        }
    },
    methods:{
        // 获取当前余额
        confirm(){
            apiHttp.apiCenter.getYueDetail(this.type,'',resp=>{
                if(resp.code==403){  
                    this.tishi = !this.tishi
                    this.tishiMessage = resp.message
                }else if(resp.code == 200){
                    this.canCarry2 = `${resp.data.income}`
                    this.canCarry1 = `${resp.data.recharge}`
                    this.checked = resp.data.checked
                    if(this.checked == 0){
                        this.tishi1 = !this.tishi1
                        this.tishiMessage1 = '请您先绑定支付宝'
                    }
                    this.fetchAccount = resp.data.fetchAccount;
                    this.personName = resp.data.personName;                              
                }else{
                    this.$Message.warning(resp.message)
                }                                                                                           
            })
        },
        changeTxActive(index){
            if(index==0){
                this.type=41;
            }else if(index==1){
                this.type=40;
            } 
            this.confirm()  
            this.$emit("changeTxActive1",index)
        },
        // 提现金额手续计算
        fetchCost(){
            apiHttp.apiCenter.fetchCost(this.money,this.type,'',resp=>{
                if(resp.code == 200){
                    this.needPay = resp.data.needPay
                    this.finalMoney = resp.data.finalMoney
                }
            })
        },
        // 提现
        tixain(){
            if(this.checked == 0){
                this.$Message.warning('请先到安全设置,绑定支付宝才能提现...')
            }else{
                let params = {
                    money:this.money,
                    type:this.type
                }
                apiHttp.apiCenter.fetchOut(params,resp=>{
                    if(resp.code == 200){
                        this.$Message.success('您好！提现申请已经成功提交，3-5个工作日内到账！')
                        this.money = ''
                        this.needPay = ''
                        this.finalMoney = ''
                    }else{
                        this.$Message.warning(resp.message)
                    }
                })
            }
        },
        // 去认证
        goRz(){
            this.$parent.tabActiveType(8,1)
        },
        // 去绑定
        goRz1(){
            this.$parent.tabActiveType(8,0)
        }
    }
}
</script>
<style scoped>
/* .Withdraw-view-left .name-readonly span{
    font-size: 18px;
    color: red;
} */
</style>


